﻿<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="meta description" name="description">

    <!-- Site title -->
    <title>商品详情</title> <!-- Favicon -->
<link rel="icon" href="<%=ctxPath%>/static/favicon.ico" mce_href="<%=ctxPath%>/static/favicon.ico" type="image/x-icon" />

    <!-- Bootstrap CSS -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font-Awesome CSS -->
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- IonIcon CSS -->
    <link href="../assets/css/ionicons.min.css" rel="stylesheet">
    <!-- Plugins CSS -->
    <link href="../assets/css/plugins.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="../assets/css/style.css" rel="stylesheet">
</head>

<body>
<!-- header area start -->
<header>
    <!-- main menu area start -->
    <div class="header-main sticky">
        <div class="container custom-container">
            <div class="row align-items-center position-relative">
                <div class="col-lg-2 col-md-6 col-6 position-static">
                    <div class="logo">
                        <a href="index.html">
                            <img alt="Brand logo" src="../assets/img/logo/gues_welcome.jpg">
                        </a>
                    </div>
                </div>
                <div class="col-lg-8 d-none d-lg-block position-static">
                    <div class="main-header-inner">
                        <div class="main-menu">
                            <nav id="mobile-menu">
                                <ul>
                                    <li><a href="index.html">首页</a></li>
                                    <li><a href="shop-grid-full-width.html">商品</a></li>
                                    <li><a href="cart.html">购物车</a></li>

                                    <li><a href="collect.html">收藏</a></li>
                                    <li><a href="my-account.html">设置</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="col-12 d-block d-lg-none">
                    <div class="mobile-menu"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- main menu area end -->
</header>
<!-- header area end -->

<!-- page main wrapper start -->
<div class="product-details-wrapper section-padding">
    <div class="container custom-container">
        <div class="row">
            <div class="col-lg-12">
                <!-- product details inner end -->
                <div class="product-details-inner">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="product-large-slider mb-20">
                                <img alt="" src="../assets/img/product/product-details-img1.jpg"/>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="product-details-des">
                                <h3>Chaz Kangeroo 连帽衫</h3>
                                <div class="pro-review">
                                    <span><a href="#">1 个评论</a></span>
                                </div>
                                <div class="price-box">
                                    <span class="regular-price">$70.00</span>
                                    <span class="old-price"><del>$80.00</del></span>
                                </div>
                                <p>Lorem存有悲坐阿梅德，tempor labore sadipscing多年来，和一个伟大的想法，但你应该每个月激动人心Eirmod
                                    tempor直径ERAT工作，该项目的sed的直径。
                                    它不只是任何的船，和软，但值得。再融资。应力篮球Mauris直径。但是，没有香蕉开发商。为了达到最大的摄影，但变成了裙子。</p>
                                <div class="quantity-cart-box d-flex align-items-center mb-20">
                                    <div class="quantity">
                                        <div class="pro-qty"><label>
                                            <input type="text" value="1">
                                        </label></div>
                                    </div>
                                    <div class="sqr-btn">
                                        <a href="cart.html">加入购物车</a>
                                    </div>
                                </div>
                                <div class="color-option mb-20">
                                    <h5>颜色 :</h5>
                                    <ul>
                                        <li>
                                            <a class="c-black" href="#" title="Black"></a>
                                        </li>
                                        <li>
                                            <a class="c-blue" href="#" title="Blue"></a>
                                        </li>
                                        <li>
                                            <a class="c-brown" href="#" title="Brown"></a>
                                        </li>
                                        <li>
                                            <a class="c-gray" href="#" title="Gray"></a>
                                        </li>
                                        <li>
                                            <a class="c-red" href="#" title="Red"></a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pro-size mb-20">
                                    <h5>尺寸 :</h5>
                                    <label>
                                        <select class="nice-select">
                                            <option>S</option>
                                            <option>M</option>
                                            <option>L</option>
                                            <option>XL</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="availability mb-20">
                                    <h5>可用性:</h5>
                                    <span>有现货</span>
                                </div>
                                <div class="share-icon">
                                    <h5>分享:</h5>
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                    <a href="#"><i class="fa fa-pinterest"></i></a>
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- product details inner end -->
                <!-- product details reviews start -->
                <div class="product-details-reviews section-padding">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="product-review-info">
                                <ul class="nav review-tab">
                                    <li>
                                        <a class="active" data-toggle="tab" href="#tab_one">描述</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#tab_two">信息</a>
                                    </li>
                                </ul>
                                <div class="tab-content reviews-tab">
                                    <div class="tab-pane fade show active" id="tab_one">
                                        <div class="tab-one">
                                            <p>Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。事实上，无论是那里的tristique
                                                auctor燕雀augue。存有metus feugiat SEM，QUIS发酵turpis性爱的需求和欲望是。而在很久以前。Fusce
                                                ultricies质量水平。Fusce aliquam，普鲁斯eget sagittis坐阿梅德，SAPIEN自由人hendrerit
                                                EST，但它不是唯一的，也不commodo augue。</p>
                                            <div class="review-description">
                                                <div class="tab-thumb">
                                                    <img alt="" src="../assets/img/about/services.jpg">
                                                </div>
                                                <div class="tab-des">
                                                    <h3>产品信息 :</h3>
                                                    <ul>
                                                        <li>Donec non est at libero vulputate rutrum.</li>
                                                        <li>Morbi ornare lectus quis justo gravida semper.</li>
                                                        <li>Pellentesque aliquet, sem eget laoreet ultrices</li>
                                                        <li>Donec a neque libero.</li>
                                                        <li>Pellentesque aliquet, sem eget laoreet ultrices</li>
                                                        <li>Morbi ornare lectus quis justo gravida semper.</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <p>Cras neque metus, consequat et blandit et, luctus a nunc. Etiam
                                                gravida vehicula tellus, in imperdiet ligula euismod eget.
                                                Pellentesque habitant morbi tristique senectus et netus et malesuada
                                                fames ac turpis egestas. Nam erat mi, rutrum at sollicitudin
                                                rhoncus, ultricies posuere erat. Duis convallis, arcu nec aliquam
                                                consequat, purus felis vehicula felis, a dapibus enim lorem nec
                                                augue. Nunc facilisis sagittis ullamcorper.</p>
                                            <p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus.
                                                Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci
                                                luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet
                                                congue. Vivamus adipiscing nisl ut dolor dignissim semper. Nulla
                                                luctus malesuada tincidunt.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="tab_two">
                                        <table class="table table-bordered">
                                            <tbody>
                                            <tr>
                                                <td>颜色</td>
                                                <td>黑色, 蓝色, 红色</td>
                                            </tr>
                                            <tr>
                                                <td>尺寸</td>
                                                <td>L, M, S</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane fade" id="tab_three">
                                        <form action="#" class="review-form">
                                            <h5>1 review for <span>Chaz Kangeroo Hoodies</span></h5>
                                            <div class="total-reviews">
                                                <div class="rev-avatar">
                                                    <img alt="" src="../assets/img/about/avatar.jpg">
                                                </div>
                                                <div class="review-box">
                                                    <div class="ratings">
                                                        <span class="good"><i class="fa fa-star"></i></span>
                                                        <span class="good"><i class="fa fa-star"></i></span>
                                                        <span class="good"><i class="fa fa-star"></i></span>
                                                        <span class="good"><i class="fa fa-star"></i></span>
                                                        <span><i class="fa fa-star"></i></span>
                                                    </div>
                                                    <div class="post-author">
                                                        <p><span>admin -</span> 30 Nov, 2018</p>
                                                    </div>
                                                    <p>Aliquam fringilla euismod risus ac bibendum. Sed sit amet sem
                                                        varius ante feugiat lacinia. Nunc ipsum nulla, vulputate ut
                                                        venenatis vitae, malesuada ut mi. Quisque iaculis, dui
                                                        congue placerat pretium, augue erat accumsan lacus</p>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col">
                                                    <label class="col-form-label"><span class="text-danger">*</span>
                                                        Your Name</label>
                                                    <label>
                                                        <input class="form-control" required type="text">
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col">
                                                    <label class="col-form-label"><span class="text-danger">*</span>
                                                        Your Email</label>
                                                    <label>
                                                        <input class="form-control" required type="email">
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col">
                                                    <label class="col-form-label"><span class="text-danger">*</span>
                                                        Your Review</label>
                                                    <label>
                                                        <textarea class="form-control" required></textarea>
                                                    </label>
                                                    <div class="help-block pt-10"><span
                                                            class="text-danger">Note:</span> HTML is not translated!
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col">
                                                    <label class="col-form-label"><span class="text-danger">*</span>
                                                        Rating</label>
                                                    &nbsp;&nbsp;&nbsp; Bad&nbsp;
                                                    <label>
                                                        <input name="rating" type="radio" value="1">
                                                        &nbsp;
                                                    </label>
                                                    <label>
                                                        <input name="rating" type="radio" value="2">
                                                        &nbsp;
                                                    </label>
                                                    <label>
                                                        <input name="rating" type="radio" value="3">
                                                    </label>
                                                    &nbsp;
                                                    <label>
                                                        <input name="rating" type="radio" value="4">
                                                    </label>
                                                    &nbsp;
                                                    <label>
                                                        <input checked name="rating" type="radio" value="5">
                                                    </label>
                                                    &nbsp;Good
                                                </div>
                                            </div>
                                            <div class="buttons">
                                                <button class="sqr-btn" type="submit">Continue</button>
                                            </div>
                                        </form> <!-- end of review-form -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- product details reviews end -->
            </div>
        </div>
    </div>
</div>
<!-- page main wrapper end -->

<!-- footer area start -->
<footer>
    <!-- footer botton area start -->
    <div class="footer-bottom-area">
        <div class="container custom-container">
            <div class="row align-items-center">
                <div class="col-md-4 order-1">
                    <div class="footer-social-link">
                        <a href="#"><i class="fa fa-wechat"></i></a>
                        <a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=506031313"><i class="fa fa-qq"></i></a>
                        <a href="#"><i class="fa fa-weibo"></i></a>
                    </div>
                </div>
                <div class="col-md-4 order-3 order-md-2">
                    <div class="copyright-text text-center">
                        <p>版权<a href="#" title="self">@colouredglaze</a>保留所有权利</p>
                    </div>
                </div>
                <div class="col-md-4 ml-auto order-2 order-md-3">
                    <div class="footer-payment">
                        <img alt="" src="../assets/img/payment.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer botton area end -->
</footer>
<!-- footer area end -->

<!--All jQuery, Third Party Plugins & Activation (main.js) Files-->
<script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- Jquery Min Js -->
<script src="../assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Popper Min Js -->
<script src="../assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap Min Js -->
<script src="../assets/js/vendor/bootstrap.min.js"></script>
<!-- Plugins Js-->
<script src="../assets/js/plugins.js"></script>
<!-- Ajax Mail Js -->
<script src="../assets/js/ajax-mail.js"></script>
<!-- Active Js -->
<script src="../assets/js/main.js"></script>
</body>

</html>
